
<div class="spots form">
	<?php print $this->Form->create('Spot', array('type' => 'file')); ?>
		<h3><?php print __('Create Spot'); ?></h3>
		<ul class="multistep">
			<li class="active"><a href="#" onclick="return formStep(1);">1. <?php echo __('Enter Spot data'); ?></a></li>
			<li><a href="#" onclick="return formStep(2);">2. <?php echo __('Enter position data'); ?></a></li>
			<li><a href="#" onclick="return formStep(3);">3. <?php echo __('Add Items'); ?></a></li>
		</ul>
		<fieldset id="fieldsetStep1">
			<?php
				echo $this->Form->input('name', array('label' => __('Name')), array('escape' => false));
				echo $this->Form->input('description', array('label' => __('Description')), array('escape' => false));
				echo $this->Form->input('picture', array('type' => 'file', 'label' => __('Picture'), 'size' => 60), array('escape' => false));
				echo $this->Form->input('category_id');
			?>
			<div style="float:right">
				<a href="<?php echo $this->Html->url(array('action' => 'index')); ?>" class="cancel button"><?php echo __('Cancel'); ?></a>
				<a href="#" onclick="return formStep(2)" class="button next"><?php echo __('Next >'); ?></a>
			</div>
		</fieldset>
		<fieldset id="fieldsetStep2" class="hidden">
		<?php
			echo $this->Form->input('city_id', array('label' => __('City'), 'id' => 'cities'), array('escape' => false));
			echo $this->Form->input('address', array('label' => __('Address')), array('escape' => false));
			echo $this->Form->input('latitude', array('type' => 'hidden', 'id' => 'latitude'));
			echo $this->Form->input('longitude', array('type' => 'hidden', 'id' => 'longitude'));
			echo $this->Form->label('map');
		?>
			<div id="map" class="map"></div>
			<div style="float:right">
				<a href="#" onclick="return formStep(1)" class="button prev"><?php echo __('< Back'); ?></a>
				<a href="#" onclick="return formStep(3)" class="button next"><?php echo __('Next >'); ?></a>
			</div>
		</fieldset>
		<fieldset id="fieldsetStep3" class="hidden">
			<?php
				echo $this->Form->input("Item.0.name");
				echo $this->Form->input("Item.1.name");
				echo $this->Form->input("Item.2.name");
			?>
			<div style="float:right">
				<a href="#" onclick="return formStep(2)" class="button prev"><?php echo __('< Back'); ?></a>
				<input type="submit" value="<?php echo __('Save'); ?>" class="submit" />
			</div>
		</fieldset>
	<?php print $this->Form->end(); ?>
</div>

<?php 
	echo $this->Html->script('/admin/js/locations');
	echo $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=false');
?>
<script type="text/javascript">
	
	var cities = [];
	
	$(document).ready(function() {
		
		// validate form
		$(".spots form").validate(formValidations.Spot);
		
		// display first fieldset
		$(".spots form fieldset:first").show();
		
		$.getJSON("../ajax/cities.json", function(data) {
			
			$.each(data.cities, function(index, element) {
				cities[element.City.id] = element.City;
			});
			
			// initialize map
			var city = cities[$("#cities").val()];
			initMap({
				latitude  : city.latitude,
				longitude : city.longitude
			});
			
			$("#cities").change(function() {
				var city = cities[$(this).val()];
				$("#latitude").val( city.latitude );
				$("#longitude").val( city.longitude );
				adjustGoogleMap({
					position : {
						latitude  : city.latitude,
						longitude : city.longitude
					}
				});
			});
			
		});
		
	});
	
	var initMap = function(location) {
		var map = initGoogleMapWithMarker('create', {
			target : 'map',
			zoom : 12,
			draggable : true,
			position : location
		}, function(event, map, marker) {
			// drag marker callback
			$("#latitude").val( marker.getPosition().lat() );
			$("#longitude").val( marker.getPosition().lng() );
		});
	};
	
	var formStep = function(step) {
	
		if( !$(".spots form").valid() ) {
			return false;
		}
	
		switch( step ) {
			case 1:
				$(".spots form fieldset").hide();
				$("#fieldsetStep1").show();
				break;
			case 2:
				$(".spots form fieldset").hide();
				$("#fieldsetStep2").show();
				break;
			case 3:
				$(".spots form fieldset").hide();
				$("#fieldsetStep3").show();
				break;
		}
		
		// multistep active
		$(".multistep li").each(function(index, element) {
			if( index == step - 1 ) {
				$(this).addClass("active");
			} 
			else {
				$(this).removeClass("active");
			}
		});
		
		return false;
	};
	
</script>


